前陣子和朋友在書局逛街的時候，他問了一句話：
「欸！你都是怎麼重頭學習一個新技術的啊？」
在記憶裡，我是這樣回答的：
「很簡單啊，做就對了！」

沒錯！

就是這樣子，所以第二天的我們繼續做下去吧XD

條件判斷式

一、那該怎麼使用if？

在Vue.js中，v-if的使用非常直觀，就像以下這樣：
HTML

<div id="vueDiv" v-if="status">
    {{text}}
</div>

JavaScript

let vueData = {
    text : 'Hello!Wrold!',
    status : true,
} 

let vueDiv = new Vue({
    el:'#vueDiv',
    data:vueData,
})

在HTML中使用v-if="status"去判斷status內的資料是true或false，如果是true的話就顯示；false則隱藏，不過上述的例子可能看不出什麼v-if的作用，以下在console中改變status的值，當值被改變時，Vue.js也會重新繫結判斷：

1. status=true的初始畫面，會看到Hello!Wrold!
   
2. 把status的值變成false，Hello!Wrold!會被隱藏起來。
   

二、既然有v-if那會不會有v-else-if和v-else？

有的，讓我們繼續看下去吧！
HTML

<div id="vueDiv" >
    <span v-if="status == 'A'">我是小明</span>
    <span v-else-if="status == 'B'">我是小華</span>
    <span v-else>我是神Q</span>
</div>

JavaScript

let vueData = {
    status : 'A',
}

let vueDiv = new Vue({
    el:'#vueDiv',
    data:vueData,
})

在上方的HTML用一層div包住了三個span，並透過v-if來綁定status的判斷，如果等於A就顯示小明；等於B就顯示小華；都不是的話顯示神Q。如此一來就可以透過程式般的方式去控制目前要顯示的DOM，要注意的是v-else-if和v-else都是跟著v-if跑的，如果在他們上面沒有v-if，是不會有任何作用的。

另外，Vue.js的條件判斷為了更有效率的做切換DOM的動作，如果是目前已經在畫面上的DOM，就不會把他移除再建立一個，而是直接改變兩個DOM不同的地方而已，官方有舉一個例子說明這件事情：
HTML

<div id="vueDiv" >
    <input v-if="status" placeholder="輸入姓名">
    <input v-else="status" placeholder="輸入mail">
    <input type="button" value="切換輸入" @click="changeStatus">
</div>

JavaScript

let vueData = {
    status : true,
}

let vueMethods = {
    //切換status的值
    changeStatus : () =>{
        vueData.status ? vueData.status = false : vueData.status = true
    }
}

let vueDiv = new Vue({
    el:'#vueDiv',
    data:vueData,
    methods:vueMethods,
})

結果會如下，當他被點擊改變status的值後，input的placeholder屬性值會變，但是這並不代表他是把input換掉了，就像我剛剛提到的，Vue.js為了提高效能，只會重新繪製不同的地方，這種做法類似於replace()，可以試著把input填入值，在點擊按鈕切換input會發現我們輸入的value不會消失，就是他只替換掉placeholder屬性值的最好證明了！
未輸入值之前，input的placeholder會改變：

當填入值後，會發現就算切換了value也不會清空或改變：

不過這個方式有好有壞！如果是想要完全獨立兩個input反而會有點麻煩，所以Vue.js幫大家想了一個方法，那就是使用key去為每個input做一個識別，這樣就會重新繪製了！這裡只需調整HTML：
HTML

<div id="vueDiv" >
    <input v-if="status" placeholder="輸入姓名" key="userName">
    <input v-else="status" placeholder="輸入mail" key="userEmail">
    <input type="button" value="切換輸入" @click="changeStatus">
</div>

沒有輸入值的結果就和上方一樣，直接來看看填入value值後切換吧！

所以大家可以知道v-if的基本用法，還有v-if的切換是會把DOM給移除再新增的！也因為這一點，所以上方的例子才會在從mail的input切回name的input時清空value值，其實也不是清空，只是因為他重新繪製了，所以value的值就不會留著。

三、如果v-if會把DOM給移除，那有沒有不移除的方法？

可能有些人會這麼想，

這也能當標題？才沒人會在乎這個吧！

錯！就算真的沒人在乎，Vue.js也在乎，於是我們有了v-show這個屬性可以用，他的用法和v-if很類似，不過沒有分支；只有唯一，來看看吧！
HTML

<!--把以上範例的v-if改成v-show-->
<div id="vueDiv" >
    <input v-show="status" placeholder="輸入姓名" key="userName">
    <input v-show="status == false" placeholder="輸入mail" key="userEmail">
    <input type="button" value="切換輸入" @click="changeStatus">
</div>

JavaScript的部分依然不需要改變，據官方說法v-show是使用CSS去控制他的隱藏和顯示，於是我一個好奇去看HTML點擊按鈕後的變化，哦原來是熟悉的display:none：

知道原理後，應該想像的到運行後的結果，就算是相互切換也不會清掉value的值，畢竟只是透過CSS去隱藏而已：

所以我們可以對這兩種用法下個結論(感謝fysh711426大大留言補充)：

• 使用v-if一開始再載入的畫面較少，但是切換畫面會重新繪製資料，資料一多會比較吃效能。
• 使用v-show一開始就會先將全部的DOM繪製，切換則是透過CSS去控制，所以在切換時的效能耗損較少。

如果一開始的資料龐大可以選擇v-if減少載入時間，但如果覺得切換時會有一些不順，就可以改用v-show減少切換的效能，以上兩個方式在使用上就互相搭配囉！。

關於條件判斷v-if和v-show的基本用法先告一段落了，其實今天本來要連迴圈一起講，但是時間有限，明天還要上工XD，所以就一個壯士斷腕直接移到明天去，不然我怕趕出來的文章品質也不會很好，希望自己以後再回來看也不會有「天哪！到底再寫什麼？」的感覺，哈哈哈。

最後感謝各位大大的觀看，如果文章中有什麼問題、解釋不清楚或是理解錯誤的地方，還請麻煩留言告訴我，謝謝大家